<template>
  <div id="app">
    <div id="a" @click="a" ref="a"></div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb class="bre-nav" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">权限</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区 -->
    <div class="search">
      <div class="search-top">
        <i class="search-top-left el-icon-search">筛选搜索</i>
        <el-row class="search-top-right">
          <el-button>重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </el-row>
      </div>
      <span>输入搜索：</span>
      <el-input v-model="input" class="search-buttom" placeholder="账号/姓名"></el-input>
    </div>
    <!-- 数据列表 -->
    <div class="dataList">
      <i class="dataList-left el-icon-tickets">数据列表</i>
      <el-row class="dataList-right">
        <el-button @click="block" οnclick="a.style.display='none';tableAdd.style.display='none'">添加</el-button>
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width:1300px" class="tables">
      <el-table-column prop="num" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="account" label="账号" width="170" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
      <el-table-column prop="mail" label="邮箱" width="180" align="center"></el-table-column>
      <el-table-column prop="date" label="添加时间" width="180" align="center"></el-table-column>
      <el-table-column prop="last" label="最后登录" width="180" align="center"></el-table-column>
      <el-table-column prop="zip" label="是否启用" width="120" align="center">
        <el-switch v-model="value"></el-switch>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">分配角色</el-button>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="deletes(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15,]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      style="float:right;"
    ></el-pagination>
    <!-- 添加数据 -->
    <div class="tableAdd" ref="adds">
      <div class="table-tit">
        <span>添加用户</span>
        <b @click="x">✖</b>
      </div>
      <form name="my_form" method="POST" class="table-con">
        <p>
          账号：
          <input type="text" v-model="account" />
        </p>
        <p>
          姓名：
          <input type="text" v-model="name" />
        </p>
        <p>
          邮箱：
          <input type="text" v-model="mail" />
        </p>
        <p>
          密码：
          <input type="text" />
        </p>
        <p>
          备注：
          <textarea cols="35" rows="8"></textarea>
        </p>
        <br />
        <label for class="table-label">是否启用：</label>
        <input type="radio" name="radio1" value="radio单选项1" />是
        <input type="radio" name="radio1" value="radio单选项2" />否
        <el-row class="table-row">
          <el-button size="small">取消</el-button>
          <el-button type="primary" size="small" @click="add">确定</el-button>
        </el-row>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: true,
      input: "",
      account: "",
      name: "",
      mail: "",
      tableData: [
        {
          num: "1",
          account: "test",
          name: "测试账号",
          mail: "test@qq.com",
          date: "2018-09-29 13:55:30",
          last: "2018-09-29 13:55:39",
        },
        {
          num: "2",
          account: "admin",
          name: "系统管理员",
          mail: "admin@163.com",
          date: "2018-09-28 15:65:30",
          last: "2018-09-29 13:55:39",
        },
        {
          num: "3",
          account: "macro",
          name: "macro",
          mail: "macro@qq.com",
          date: "2019-09-29 11:55:30",
          last: "2019-09-29 13:43:39",
        },
        {
          num: "4",
          account: "productAdmin",
          name: "商品管理员",
          mail: "product@qq.com",
          date: "2020-02-07 16:15:08",
          last: "N/A",
        },
        {
          num: "5",
          account: "orderAdmin",
          name: "订单管理员",
          mail: "order@qq.com",
          date: "2020-02-07 16:15:50",
          last: "N/A",
        },
      ],
      // 分页数据
      currentPage: 1,
      pageSize: 5,
      total: 0, // 总条目数
      multipleSelection: [],
      border: true,
      select: "",
      input: "",
      value1: "",
      border: true,
      value: "",
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    deletes: function (index) {
      this.tableData.splice(index, 1);
    },
    block: function () {
      this.$refs.adds.style.display = "block";
      this.$refs.a.style.display = "block";
    },
    a: function () {
      this.$refs.adds.style.display = "none";
      this.$refs.a.style.display = "none";
    },
    x: function () {
      this.$refs.adds.style.display = "none";
      this.$refs.a.style.display = "none";
    },
    add: function () {
      this.tableData.push({
        num: 6,
        account: this.account,
        name: this.name,
        mail: this.mail,
        date: "2018-09-29 13:55:39",
        last: "N/A",
      });
      this.$refs.adds.style.display = "none";
      this.$refs.a.style.display = "none";
    },
  },
};
</script>
<style scoped>
/* 面包屑导航栏 */
.bre-nav {
  height: 30px;
  line-height: 50px;
  margin-left: 30px;
}
/* 搜索区 */
.search {
  width: 1300px;
  height: 120px;
  border: 1px #ccc solid;
  margin: 20px 0 20px 30px;
}
.search-top {
  width: 100%;
  height: 50px;
  padding-top: 20px;
}

.search-top-left {
  margin-left: 30px;
  float: left;
}
.search-top-right {
  float: right;
  margin-right: 30px;
}
.search-buttom {
  width: 200px;
  margin-left: 10px;
}
.search span {
  margin-left: 80px;
  display: inline-block;
}
/* 数据列表 */
.dataList {
  width: 1300px;
  height: 50px;
  border: 1px #ccc solid;
  margin: 20px 0 20px 30px;
}
.dataList-left {
  float: left;
  margin-left: 30px;
  padding-top: 15px;
}
.dataList-right {
  float: right;
  margin-right: 30px;
  padding-top: 5px;
}
/* 表格 */
.tables {
  margin-left: 30px;
}
.pagination {
  margin: 30px 0 0 750px;
}
/* add */
/* .tableAdd {
  width: 450px;
  height: 400px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
} */

#a {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 200, 0.6);
  z-index: 1;
  display: none;
}
.tableAdd {
  width: 600px;
  height: 550px;
  /*表单居中设置*/
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -250px;
  margin-left: -250px;
  background: #fff;
  z-index: 2;
  display: none;
}
.table-con {
  margin-top: 80px;
}
.table-con p {
  margin: 20px 0 0 100px;
}
.table-con p input {
  width: 268px;
  height: 30px;
}
.table-label {
  margin-left: 80px;
}
.table-row {
  margin: 40px 0 0 450px;
}
.table-tit {
  width: 100%;
  height: 10px;
  margin-top: 20px;
}
.table-tit span {
  display: inline-block;
  float: left;
  margin-left: 20px;
}
.table-tit b {
  display: inline-block;
  float: right;
  margin-right: 20px;
  cursor: pointer;
}
</style>
